<!--
 * @Description: 
 * @Date: 2025-07-09 18:53:55
 * @LastEditors: ocean
 * @LastEditTime: 2025-07-10 11:51:37
 * @FilePath: \uview2.0-template\components\tabbar\index.vue
-->
<template>
  <u-tabbar active-color="#BA201E" inactive-color="rgba(38,38,38,.4)" :fixed="true" :placeholder="true"
    :safeAreaInsetBottom="true" :value="current" @change="handleTabChange">
    <u-tabbar-item :text="item.text" v-for="(item, index) in tabbar" :key="item.id">
      <image class="u-page__item__slot-icon" slot="active-icon" :src="item.selectedIconPath">
      </image>
      <image class="u-page__item__slot-icon" slot="inactive-icon" :src="item.iconPath"></image>
    </u-tabbar-item>
  </u-tabbar>
</template>

<script>
	export default {
  name: 'tabBar',
  props: {
    current: {
      type: Number,
      default: 0
    }
  },
		data() {
			return {
				tabbar: []
			}
		},
		mounted() {
			this.tabbar = this.$store.state.tabbarList;
		},
    methods: {
      handleTabChange (index) {
        uni.switchTab({
          url: `${this.tabbar[index].pagePath}`
        });
      }
    }
	}
</script>

<style>
.u-page__item__slot-icon{
  width: 40rpx;
  height: 40rpx;
}
</style>